<template>
  <div class="app-container">
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="版本下载" name="versionMgr">
        <Version :productId="productId" />
      </el-tab-pane>
      <el-tab-pane label="使用说明" name="userManual">
        <Document  :productTypeId="id"  />
      </el-tab-pane>

    </el-tabs>
  </div>
</template>
<script>
import Version from "./version";
import Document from "../../product/document"
export default {
  components: { Version , Document},
  created() {
    this.id = this.$route.query.id; // 获取查询参数
    this.productId = this.$route.query.id; // 获取查询参数
  },
  data() {
    return {
      id: 10,
      activeName: "versionMgr",
      currentTab: "",
      fileType: ".exe",
      productId: 1,
    };
  },
  methods: {
    handleClick(tab, event) {
      //切换标签页 刷新表格
      if (this.currentTab != tab.name) {
        this.currentTab == tab.name;
        this.key++;
      }

      //判断表格页
      if (tab.name == "versionMgr") {
        this.fileType = ".exe";

      } else if (tab.name == "userManual") {
        this.fileType = ".lll";
      }
    },
  },
};
</script>
<style scoped>
.app-container {
  padding-top: 12px;
}
/*.app-container::v-deep .el-tabs__header {*/
/*  height: 40px;*/
/*}*/
.app-container::v-deep .el-tabs__item {
  font-size: 14px;
  font-weight: 600;
}

/**悬浮 */
.app-container::v-deep .el-tabs__item:hover {
  cursor: pointer;
  opacity: 1;
}

/*去下划线 */
.app-container::v-deep .el-tabs__nav-wrap::after {
  position: static !important;
}

</style>
